<template>
  <view style="width: 100%">
    <view
      class="screen-bar"
      :style="{ height: height + 'rpx', backgroundColor: bgcolor }"
    >
      <view
        class="screen-bar-item"
        @click.stop="itemClick(index)"
        v-for="(item, index) in navData"
        :key="index"
        :style="{
          width: 100 / listArr.length + '%',
          fontSize: barFontSize + 'rpx',
          color: currentIndex == index && show ? activeColor : barTextColor,
        }"
      >
        <view
          v-for="(child, childx) in item"
          :key="childx"
          class="bar-item-text"
          :style="{
            color: child.seleColor ? activeColor : barTextColor,
          }"
        >
          <span v-if="child.select">{{ child.text }}</span>
        </view>

        <!-- 箭头 -->
        <image
          src="https://i.loli.net/2020/07/15/QsHxlr1gbSImvWt.png"
          mode="aspectFill"
          class="icon-triangle"
          v-if="index === updateIndex"
        ></image>
        <image
          src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png"
          mode="aspectFill"
          class="icon-triangle"
          v-else
        ></image>
      </view>

      <view
        class="dropdown-box"
        :style="{
          bottom: '-' + itemHeight * maxDropdownLength + 'rpx',
          height: itemHeight * maxDropdownLength + 'rpx',
          backgroundColor: bgcolor,
          opacity: show ? '1' : '0',
          display: show ? 'block' : 'none',
        }"
      >
        <scroll-view scroll-y="true" style="height: 100%">
          <view
            class="dropdown-item"
            :style="{
              height: itemHeight + 'rpx',
              paddingLeft: itemPadding + 'rpx',
              fontSize: itemFontSize + 'rpx',
              color: item.select ? activeColor : itemTextColor,
            }"
            :class="item.select ? 'actOpt' : ''"
            v-for="(item, index) in navData[currentIndex]"
            :key="index"
            @click="subItemClick(index)"
          >
            {{ item.text }}
          </view>
        </scroll-view>
      </view>

      <slot name="more"></slot>
    </view>

    <view
      class="bg-mask"
      :class="[show ? 'bg-mask-show' : '']"
      @tap="maskClose"
      @touchmove="touchControl"
    ></view>
  </view>
</template>

<script>
/**
 *  下拉组件
 * @author xzj
 * @create date 2021-4-3
 * @update user xzj
 * @update date 2021-4-3
 * @note 遮罩层级98 筛选条&下拉层层级99
 **/
export default {
  name: "com-dropdown-screen",
  props: {
    // 筛选条高度 （rpx）
    height: {
      type: Number,
      default: 88,
    },
    // 下拉单项高度
    itemHeight: {
      type: Number,
      default: 70,
    },
    // 当前文字活跃颜色
    activeColor: {
      type: String,
      default: "#0377fc",
    },
    //背景颜色
    bgcolor: {
      type: String,
      default: "#fff",
    },
    //下拉标题数组
    listArr: {
      type: Array,
      default: () => {
        return ["冰度", "甜度", "加料", "配送距离"];
      },
    },
    // item数量超过多少开始滚动
    maxItemCount: {
      type: Number,
      default: 5,
    },
    //下拉选项数组（二维数组）
    itemArr: {
      type: Array,
      default: () => {
        return [
          [
            {
              text: "加冰",
              value: 1,
            },
            {
              text: "去冰",
              value: 2,
            },
          ],
          [
            {
              text: "三分糖",
              value: 3,
            },
            {
              text: "五分糖",
              value: 4,
            },
            {
              text: "七分糖",
              value: 5,
            },
            {
              text: "全糖",
              value: 6,
            },
          ],
          [
            {
              text: "珍珠",
              value: 7,
            },
            {
              text: "椰果",
              value: 8,
            },
            {
              text: "布丁",
              value: 9,
            },
            {
              text: "水",
              value: 10,
            },
          ],
        ];
      },
    },
    // 选项左偏移
    itemPadding: {
      type: Number,
      default: 24,
    },
    // 能否遮罩关闭
    maskTouch: {
      type: Boolean,
      default: true,
    },
    // 是否需要选择后替换标题
    isNeedChangeTitle: {
      type: Boolean,
      default: true,
    },
    // 标题字号
    barFontSize: {
      type: Number,
      default: 28,
    },
    //标题颜色
    barTextColor: {
      type: String,
      default: "#666",
    },
    //下拉字号
    itemFontSize: {
      type: Number,
      default: 28,
    },
    // 下拉文字颜色
    itemTextColor: {
      type: String,
      default: "#666",
    },
    // 需要展示的字段，比如你的数据是item.name 这里填的就是name
    showTag: {
      type: String,
      default: "text",
    },
    // 是否要滑动关闭
    isTouchPrevent: {
      type: Boolean,
      default: true,
    },
    // 自定义事件的索引数组
    customIndexArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //默认选中条件索引,超出一类时必填
    defaultIndex: {
      type: Array,
      default: () => {
        return [0];
      },
    },
  },
  data() {
    return {
      currentIndex: 0,
      show: false,
      updateIndex: null,
      arrBase64:
        "",
      selIndex: [], //选中条件索引
      navData: [],
      itemwatData: [],
    };
  },
  computed: {
    maxDropdownLength() {
      return this.itemArr[this.currentIndex].length > this.maxItemCount
        ? this.maxItemCount
        : this.itemArr[this.currentIndex].length;
    },
  },
  watch: {
    itemArr(newV, oldV) {
      this.itemwatData = newV;
      this.init();
    },
  },
  created() {
    // this.navData = this.itemArr;
    // this.selIndex = this.defaultIndex;
    // this.keepStatus();
  },
  methods: {
    init(defaultIndex) {
      this.navData = this.itemwatData;
      if (defaultIndex && defaultIndex.length) {
        this.defaultIndex = defaultIndex;
      }

      this.selIndex = this.defaultIndex;
      this.keepStatus();
    },
    keepStatus() {
      this.navData.forEach((itemnavData) => {
        itemnavData.map((child) => {
          child.select = false;
        });
        return itemnavData;
      });

      this.$forceUpdate();
      for (let i = 0; i < this.selIndex.length; i++) {
        let selindex = this.selIndex[i];
        this.navData[i][selindex].select = true;
      }
    },
    itemClick(index) {
      if (this.updateIndex == index) {
        this.show = !this.show;
        this.tapMask();
        return;
      }
      this.currentIndex = index;
      this.updateIndex = index;
      this.show = true;
    },
    tapMask() {
      this.updateIndex = null;
    },
    subItemClick(index, currentIndex) {
      if (currentIndex) {
        this.currentIndex = currentIndex - 1;
      }

      this.navData[this.currentIndex].filter((v, i) => {
        v.seleColor = false;
        if (index && index == i) {
          v.seleColor = true;
        }
      });

      this.currentSubIndex = index;

      this.selIndex[this.currentIndex] = index;
      this.keepStatus();
      setTimeout(() => {
        this.tapMask();
      }, 100);
      let data = [];
      let res = this.navData.forEach((item) => {
        let sel = item.filter((child) => child.select);
        data.push(sel);
      });

      this.$emit("finish", data, currentIndex);
      this.show = false;
    },
    maskClose() {
      if (!this.maskTouch) return;
      this.show = false;
      this.tapMask();
    },
    touchControl() {
      if (this.isTouchPrevent) {
        this.maskClose();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.screen-bar {
  width: 100%;
  display: flex;
  position: relative;
  z-index: 99;
}

.screen-bar::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1rpx;
  background-color: #eeeeee;
  bottom: -1rpx;
  left: 0;
  z-index: 99;
}

.screen-bar-item {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen-bar-item .icon-triangle {
  width: 16rpx;
  height: 16rpx;
  margin-left: 10rpx;
}

.dropdown-box {
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 99;
  overflow: hidden;
}

.dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #111111;
  border-bottom: 1rpx solid #eeeeee;
}

.bg-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 98;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.bg-mask-show {
  visibility: visible;
  opacity: 1;
}

.bar-item-text {
  max-width: 120rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.actOpt {
  // color: #0081ff !important;
  font-weight: bold;
  position: relative;
  &::after {
    content: "✓";
    font-weight: bold;
    font-size: 36rpx;
    position: absolute;
    right: 40rpx;
  }
}
</style>
